<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./v5.3.0-dist/ol.css" type="text/css">
    <style>
        .map {
            height: 970px;
            width: 100%;
        }

        /* 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能*/
        #map .ol-zoom .ol-zoom-out {
            margin-top: 204px;
        }

        #map .ol-zoomslider {
            background-color: transparent;
            top: 2.3em;
        }

        #map .ol-touch .ol-zoom .ol-zoom-out {
            margin-top: 212px;
        }

        #map .ol-touch .ol-zoomslider {
            top: 2.75em;
        }

        #map .ol-zoom-in .ol.has-tooltip:hover[role=tooltip],
        #map .ol-zoom-in .ol-has-tooltip:focus[role=tooltip] {
            top: 3px;
        }

        #map .ol-zoom-out .ol-has-tooltip:hover[role=tooltip],
        #map .ol-zoon-out .ol-has-out-tooltip:focus[role=tooltip] {
            top: 232px;
        }

        /* 鼠标位置信息自定义样式设置 */
        .custom-mouse-position {
            color: rgb(238, 238, 238);
            font-size: 16px;
            font-family: "微软雅黑";
            /* width: 100%;
            height: 100%; */
            border: 0px;
            position: fixed;
            bottom: 0px;
            left: 130px;
            text-shadow: 2px 2px rgb(0, 0, 0);
        }
    </style>

    <script src="./v5.3.0-dist/ol.js"></script>
    <script type="text/javascript" src="qwebchannel.js"></script>
    <script type="text/javascript" src="transform.js"></script>
    <title>OpenLayers example</title>
</head>

<body>

    <div id="map" class="map"></div>
    <div id="mouse-position"></div>
    <script type="text/javascript">

        //飞机位置图标对象初始化
        var PlaneIconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([118.77361244, 31.82849401], 'EPSG:4326', 'EPSG:3857')),
        });
        PlaneIconFeature.setStyle(new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 0.5], // 锚点 默认值为图片中心
                src: './img/plane.png', // 图标路径
                rotation: 270 / 57.2957795,//机头指向-pi ~ pi 0 ~ 2pi均可
            }))
        }));

        //创建一个飞行轨迹线显示对象
        var PlaneTrace = new ol.Feature({
            geometry: new ol.geom.LineString([[0.0, 0.0], [0.0, 0.0]])
        });
        //设置线的样式
        PlaneTrace.setStyle(new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#61FF33',
                width: 5
            })
        }));

        //跑道示意线条
        var RunwaySide1 = new ol.Feature({ geometry: new ol.geom.LineString([[0.0, 0.0], [0.0, 0.0]]) });
        var RunwayMiddle = new ol.Feature({ geometry: new ol.geom.LineString([[0.0, 0.0], [0.0, 0.0]]) });
        var RunwaySide2 = new ol.Feature({ geometry: new ol.geom.LineString([[0.0, 0.0], [0.0, 0.0]]) });
        RunwaySide1.setStyle(new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#FFF200',
                width: 5
            }),
        }));
        RunwaySide2.setStyle(RunwaySide1.getStyle());
        RunwayMiddle.setStyle(new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#FFF200',
                width: 3,
                lineDash: [10, 10]
            })
        }));

        WayPointList = new ol.Feature({ geometry: new ol.geom.LineString([[0.0, 0.0], [0.0, 0.0]]) });
        WayPointList.setStyle(new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#002EFF',
                width: 3,
            })
        }));

        TaxiPointList = new ol.Feature({ geometry: new ol.geom.LineString([[0.0, 0.0], [0.0, 0.0]]) });
        TaxiPointList.setStyle(new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#FFFFFF',
                width: 3,
                lineDash: [10, 10]
            })
        }));

        PlaneIconLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [PlaneIconFeature, PlaneTrace, RunwaySide1, RunwaySide2, RunwayMiddle, WayPointList, TaxiPointList]
            }),
        });

        //使用本地瓦片的地图初始化
        window.map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({ url: './tiles/{z}/{x}/{y}.png', })
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([118.926, 30.613]),
                zoom: 10
            })
        });

        //实例化ZoomSlider控件并加载到地图容器中
        var zoomslider = new ol.control.ZoomSlider();
        window.map.addControl(zoomslider);

        //实例化比例尺控件（ScaleLine）
        var scaleLineControl = new ol.control.ScaleLine({
            //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
            units: "metric"
        });
        window.map.addControl(scaleLineControl);
        //实例化鼠标位置显示控件
        var mousePositionControl = new ol.control.MousePosition({
            //坐标格式
            coordinateFormat: ol.coordinate.createStringXY(7),
            //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
            projection: 'EPSG:4326',
            //坐标信息显示样式类名，默认是'ol-mouse-position'
            className: 'custom-mouse-position',
            //显示鼠标位置信息的目标容器
            target: document.getElementById('mouse-position'),
        });//TODO:调整custom-mouse-position样式，使鼠标位置显示控件悬浮显示在地图上方
        window.map.addControl(mousePositionControl);

        //地图中添加飞机位置图标绘制图层
        window.map.addLayer(PlaneIconLayer);

        //加载完成后进行地图功能初始化
        window.onload = function () {
            //位置记录变量
            window.plane_loc = [113, 31, 0];//WGS84坐标系下的飞机位置经纬度 [lon lat] window.plane_loc[0]--经度 window.plane_loc[1]--纬度
            window.plane_trace_list = [];
            window.waypoint_list = [];
            window.taxipoint_list = [];
            // 创建Python交互对象
            new QWebChannel(qt.webChannelTransport, function (channel) {
                var interactObj = channel.objects.interactObj;

                //更新飞机位置
                interactObj.SigToWebPlaneLoc.connect(function (lon, lat, yaw) {
                    //记录飞机位置信息
                    window.plane_loc[0] = lon;
                    window.plane_loc[1] = lat;
                    window.plane_loc[2] = yaw;

                    // 设置飞机位置
                    PlaneIconFeature.setGeometry(new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')));
                    // 设置飞机头指向
                    PlaneIconFeature.setStyle(new ol.style.Style({
                        image: new ol.style.Icon(({
                            anchor: [0.5, 0.5], // 锚点 默认值为图片中心
                            src: './img/plane.png', // 图标路径
                            rotation: yaw / 57.2957795,
                        }))
                    }));

                    //TODO:添加历史轨迹
                    window.plane_trace_list.push(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'));
                    //更新geometry属性
                    geom = new ol.geom.LineString(window.plane_trace_list);
                    PlaneTrace.setGeometry(geom);
                });

                // 添加航点到地图
                interactObj.SigToWebAddRoutes.connect(function (l) {
                    //TODO:清除当前航线内容
                    window.map.getOverlays().getArray().slice(0).forEach(
                        function (overlay) {
                            if (overlay.id == 1) {
                                window.map.removeOverlay(overlay);
                            }
                        });
                    var tmp_list = [];
                    for (var i = 0; i < l.length; i++) {
                        //TODO:添加航点标记
                        //addOneRoute(i, [gcj.lng, gcj.lat]);
                        //添加航线数据
                        tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'))
                        //实例化图文标注（图形+文本），添加到地图容器中
                        var elementDiv = document.createElement('div');
                        elementDiv.innerHTML = '<div style="width:20px;height:20px;line-height:20px;border-radius:100%;background: #2AA7DC;border: 1px solid #FFFFFF;box-shadow: 0 0 4px 0 rgba(0,0,0,0.50);text-align:center;font-size: 12px;color: #FFFFFF;letter-spacing: 0;">' + (i + 1) + '</div>'
                        var newMarker = new ol.Overlay({
                            position: ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'),
                            positioning: 'center-center',
                            element: elementDiv,
                            stopEvent: true,
                            id: 1
                        });
                        window.map.addOverlay(newMarker);
                    }
                    //显示航线
                    geom = new ol.geom.LineString(tmp_list);
                    WayPointList.setGeometry(geom);
                });
                // 添加滑行航线到地图
                interactObj.SigToWebAddTaxiRoutes.connect(function (l) {
                    //TODO:清除当前航线内容
                    window.map.getOverlays().getArray().slice(0).forEach(
                        function (overlay) {
                            if (overlay.id == 2) {
                                window.map.removeOverlay(overlay);
                            }
                        });
                    var tmp_list = [];
                    for (var i = 0; i < l.length; i++) {
                        //TODO:添加航点标记
                        //addOneRoute(i, [gcj.lng, gcj.lat]);
                        //添加航线数据
                        tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'))
                        // 实例化图文标注（图形+文本），添加到地图容器中
                        var elementDiv = document.createElement('div');
                        elementDiv.innerHTML = '<div style="width:18px;height:18px;line-height:18px;border-radius:100%;background: #2AA7DC;border: 0px solid #FFFFFF;box-shadow: 0 0 4px 0 rgba(0,0,0,0.50);text-align:center;font-size: 10px;color: #FFFFFF;letter-spacing: 0;">' + (i + 1) + '</div>'
                        var newMarker = new ol.Overlay({
                            position: ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'),
                            positioning: 'center-center',
                            element: elementDiv,
                            stopEvent: true,
                            id:2
                        });
                        window.map.addOverlay(newMarker);
                    }
                    //显示航线
                    geom = new ol.geom.LineString(tmp_list);
                    TaxiPointList.setGeometry(geom);
                });
                // 添加跑道信息到地图
                interactObj.SigToWebUpdateRunWay.connect(function (l) {

                    var i = 0;
                    var tmp_list = [];

                    tmp_list = [];
                    i = 0;
                    tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'));
                    i = 1;
                    tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'));
                    geom = new ol.geom.LineString(tmp_list);
                    RunwaySide1.setGeometry(geom);

                    tmp_list = [];
                    i = 2;
                    tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'));
                    i = 3;
                    tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'));
                    geom = new ol.geom.LineString(tmp_list);
                    RunwaySide2.setGeometry(geom);

                    tmp_list = [];
                    i = 4;
                    tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'));
                    i = 5;
                    tmp_list.push(ol.proj.transform([l[i].lon, l[i].lat], 'EPSG:4326', 'EPSG:3857'));
                    geom = new ol.geom.LineString(tmp_list);
                    RunwayMiddle.setGeometry(geom);

                });
                interactObj.SigToWebUpdateSeondRunWay.connect(function (l) {
                    alert("TBD:设置跑道2");
                });
                // 设置地图视角中心显示航线
                interactObj.SigToWebToFitView.connect(function () {
                    var view = window.map.getView();

                    var py = ol.proj.fromLonLat([window.plane_loc[0], window.plane_loc[1]]);
                    //平移地图
                    view.setCenter(py);
                });

                // 设置地图视角中心
                interactObj.SigToWebSetCenter.connect(function (lon_deg, lat_deg) {
                    var view = window.map.getView();
                    var py = ol.proj.fromLonLat([lon_deg, lat_deg]);
                    //平移地图
                    view.setCenter(py);
                    // view.setZoom(6);
                    // alert("设置地图中心位置到" + lon_deg + " " + lat_deg);
                });

                // 清除轨迹线
                interactObj.SigToWebClearTrace.connect(function () {
                    window.plane_trace_list = [];
                    // PlaneTrace.setGeometry(null);
                });

                interactObj.web_finishload();//发送加载完成指令
            });
        }


    </script>
</body>

</html>